<template>
    <view class="evaluatebox">
        <view class="evaluate">
            <!-- <view>综合评分</view> -->
            <view class="evaluatelistbox">
                <view class="centers">
                    <view class="evatext">{{ score }}分</view>
                    <!-- <view>
          <l-rate disabled score="{{score}}"  size="26" item-gap="10" active-color="orange" inactive-color="white" />
        </view> -->
                    <view class="scorename-stars">
                        <view :data-index="index" v-for="(item, index) in namelist" :key="index">
                            <image :src="score - 1 < index ? '' : item.icon1"></image>
                        </view>
                    </view>
                </view>
                <view class="centerstextbox">
                    <view class="centerstext">根据最近90天评价计算所得</view>
                    <view class="mores" @tap="mores">更多></view>
                </view>
            </view>
        </view>
        <view class="column-box">
            <view :class="'shop ' + (lastboxVisible ? 'top-90' : 'top-36')">
                <van-tabs
                    :active="active"
                    @change="onChange"
                    title-active-color="#333333"
                    title-inactive-color="#999999"
                    nav-class="nav-class"
                    custom-class="custom-class"
                    @tap.native="onClickTab"
                >
                    <van-tab title="全部评价"></van-tab>
                    <van-tab title="未回复的评价">
                        <!-- <van-empty wx:if="{{shoplist.length == 0}}" description="此区域暂无入驻门店" /> -->
                        <view class="around" v-if="false">
                            <view class="aroundtitle">
                                <view class="aroundtitleleft">
                                    <image class="ambitusicon" src="/static/images/ambitus.png"></image>
                                    <p class="ambitustext">周边服务</p>
                                </view>
                                <view class="aroundtitleright" :style="'color: ' + orange + ';'">更多></view>
                            </view>
                            <!-- 轮播 -->
                            <!-- 图片轮播图 -->
                            <!--要展示两个item 以及下一个item的部分内容，circular需要设置为false，或者不设置，display-
  multiple-items设置为2，next-margin按照自己的需求设置-->
                            <view class="swiperbox">
                                <swiper :autoplay="false" display-multiple-items="2" next-margin="100rpx" class="image_group">
                                    <block v-for="(photo, index) in 3" :key="index">
                                        <swiper-item>
                                            <view class="swiper_item">
                                                <image src="/static/images/shopto.png" mode="aspectFill"></image>
                                                <view class="swiper_itembottom">
                                                    <view class="money">￥45.0</view>
                                                    <view class="discount">￥15.0/1折</view>
                                                    <view class="synopsis">美睫美甲定制会所n没出单时mk</view>
                                                    <view class="servicemunber">已经服务:111556人</view>
                                                </view>
                                            </view>
                                        </swiper-item>
                                    </block>
                                </swiper>
                            </view>
                        </view>
                    </van-tab>
                </van-tabs>
                <!-- <view class="column-line"></view> -->
                <view class="ambitustext-lr" @tap="getChangeComment">筛选></view>
                <view class="starbox">
                    <view class="stareSerch">
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="0">
                            <view :class="'margin-bottom-xs  text-xl ' + (active == 0 ? 'text-xl text-bold' : 'text-df ')">全部({{ dataInfo.allStar }})</view>
                        </view>
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="5">
                            <view :class="'margin-bottom-xs ' + (active == 5 ? 'text-xl text-bold' : 'text-df')">五星({{ dataInfo.fiveStar }})</view>
                        </view>
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="4">
                            <view :class="'margin-bottom-xs ' + (active == 4 ? 'text-xl text-bold' : 'text-df')">四星({{ dataInfo.fourStar }})</view>
                        </view>
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="3">
                            <view :class="'margin-bottom-xs ' + (active == 3 ? 'text-xl text-bold' : 'text-df')">三星({{ dataInfo.threeStar }})</view>
                        </view>
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="2">
                            <view :class="'margin-bottom-xs ' + (active == 2 ? 'text-xl text-bold' : 'text-df')">二星({{ dataInfo.twoStar }})</view>
                        </view>
                        <view class="stareSerch-tips" @tap="queryListByType" data-index="1">
                            <view :class="'margin-bottom-xs ' + (active == 1 ? 'text-xl text-bold' : 'text-df')">一星({{ dataInfo.oneStar }})</view>
                        </view>
                    </view>
                    <view class="starbox-rl">
                        <view class="have-contentbox" :data-index="index" @tap="havecoterFun" v-for="(item, index) in havecoter" :key="index">
                            <image class="pay_icon_6" v-if="item.index == indexs" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png"></image>

                            <view v-else class="pay_icon_6text1"></view>

                            <view :class="' ' + (item.index == indexs ? 'pay_icon_6text' : 'pay_icon_6text2') + ' '">{{ item.name }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="scoreinfobox" v-for="(item, index) in dataInfo.lists" :key="index">
            <view class="scoreinfo">
                <view class="scoreinfoiconbox">
                    <image class="scoreinfoicon" :src="item.path ? item.path : 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png'"></image>
                    <view class="scoreinforight">
                        <view class="scorename">
                            <view class="scorenametext">{{ item.userName }}</view>
                        </view>
                        <view class="scorename">
                            <view class="times">{{ item.createtime }}</view>
                            <view></view>
                        </view>
                        <view class="scorename-box">
                            <view class="scorename">
                                <view class="times">商家 :</view>
                                <view class="scorename-stars">
                                    <!-- <l-rate disabled score="{{item.population}}" size="26" item-gap="10" active-color="orange" inactive-color="#FFE5E5" /> -->
                                    <!-- <l-rate disabled score="{{item.population}}"  count="{{item.population}}" size="26" item-gap="10" active-color="orange" inactive-color="#FFE5E5" /> -->
                                    <!-- <view wx:for="{{namelist}}" -->
                                    <block v-if="item.population != 0 && item.population">
                                        <view :data-index="index" v-for="(item, index1) in item.population" :key="index1">
                                            <image :src="stareSelectIcon"></image>
                                        </view>
                                    </block>
                                    <block v-else>
                                        <image :src="stareIcon"></image>
                                    </block>
                                </view>
                            </view>
                            <view class="scorename">
                                <text class="ghostGray-text">套餐：{{ item.orderName }}</text>
                                <view></view>
                                <view></view>
                            </view>
                        </view>
                        <!-- <progress class="con-pro" percent="97" show-info/> -->
                    </view>
                </view>
                <view class="screenbox">
                    <image class="screen" src="/static/images/estate.png"></image>
                    <view class="screentext" :data-storeId="item.id" @tap="screentext">详情></view>
                </view>
            </view>

            <view class="evaluation">
                <view class="evaluationtext">{{ item.describe }}</view>
                <view class="evaluationimagebox">
                    <image class="evaluationimage" :src="i" v-for="(i, index1) in item.imgs" :key="index1"></image>
                </view>
            </view>

            <view class="evaluationbottom">
                <view class="evaluationname" v-if="item.reply.length - 1">商家回复：{{ item.reply }}</view>
                <view class="evaluationname" @tap="getReplayShow" :data-id="item.id" v-else-if="!item.reply.length - 1">回复：{{ item.reply }}</view>
                <view class="reply" v-if="false">回复</view>
            </view>
        </view>
        <view>
            <view class="tips-main" v-if="!dataInfo.lists.length">
                <image class="tipsIcon" src="https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/16/041dda96d9c12121ad42a4228aac95cd.png"></image>
                <text>暂无评论～</text>
            </view>
        </view>
        <!-- <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='more'>
    <view class="usercomment mt-20" wx:for='{{commentList}}' wx:key='index'>
      <view class="flexbox usertile">
        <view class="flexbox">
          <image class="headerimg1 mr-30" src="{{item.headImg}}">
          </image>
          <view class="textfelx">
            <view class="usertext1">{{item.nickname ? item.nickname : "暂无昵称"}}</view>
            <view class="usertext3 mtb-10">美发师：{{item.stylistName}}</view>
            <view class="usertext2">服务项目：{{item.serviceName}}</view>
          </view>
        </view>
        <view class="evaluate1">
          <view>
            <l-rate disabled score="{{item.level}}" size="28" item-gap="10" active-color="orange" inactive-color="white" />
            <text class="evatext1">{{item.level}}</text>
          </view>
          <view class="evatime mt-20 mr-10">{{item.createtime}}</view>
        </view>
      </view>
      <view class="usereva">
        <view class="{{item.showtext ? 'userevatext1' : 'userevatext'}}">点评：{{item.comment}}</view>
        <view class="mt-20" wx:if="{{item.bool}}">
          <text wx:if="{{!item.showtext}}" class="more" bindtap="toMore" data-index='{{index}}'>全文</text>
          <text wx:if="{{item.showtext}}" class="more" bindtap="toMore" data-index='{{index}}'>收起</text>
        </view>
      </view>
      <view class="imglistflexbox">
        <view class="mt-20 mr-20" wx:for='{{item.imgPaths}}' data-item="{{item}}" wx:for-item="item" wx:key='index1' bindtap="previewImg">
          <image class="img-200" mode="aspectFill" src='{{item}}' data-item='{{item.imgPaths}}' data-index="{{index}}"></image>
        </view>
      </view>
      <view class="box">
        <view class="centers" wx:if='{{item.stylistReply}}'>
          <view class="placeholder-class"><text style="color: #666666;font-weight:600">美发师回复：</text><text style="word-break: break-all;">{{item.stylistReply}}</text></view>
        </view>
        <view class="centers" wx:if='{{item.reply}}'>
          <view class="placeholder-class"><text style="color: #666666;font-weight:600">门店回复：</text><text style="word-break: break-all;">{{item.reply}}</text></view>
        </view>
      </view>
      <view class="box" wx:if='{{!item.reply}}'>
        <view class="box2">
          <input type="text" class="evaluation-store-reray-input" placeholder="请输入回复内容" placeholder-class="placeholder-class" model:value="{{item.storerepay}}" bindblur="commentblur" bindinput="handleinput" data-id="{{item.id}}" />
          <view class="centers2">
            <view class="text2" bindtap="onSendTap" data-item="{{item.id}}">回复</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view> -->
        <!-- 点击筛选，出现弹窗 -->
        <view class="showbox" v-if="isShow">
            <view class="showbox-mask" @tap="getIsShow"></view>
            <view class="showbox-center">
                <view class="showbox-top">
                    <view class="showbox-top1">
                        <image class="showbox-img1" src="/static/images/shai2.png"></image>
                        <text class="showbox-comment">回复评价</text>
                        <image class="showbox-img1" src="/static/images/shai1.png"></image>
                    </view>
                    <view class="show-line"></view>
                    <view class="showbox-top2" @tap="getIsShow">
                        <image class="show-img2" src="/static/images/close.png"></image>
                    </view>
                    <!-- 微信小程序中的下拉框 -->
                    <!-- <view class="showbox-star" wx:if="{{isSelect}}" style="top:{{300+top}}rpx;">
            <view class="showbox-select" wx:for="{{allStar}}" wx:key="{{item.id}}" data-info="{{item.name}}" data-index="{{index}}" bindtap="getStar">
              <text>{{item.name}}</text>
            </view>
          </view> -->
                </view>
                <view class="showbox-body">
                    <view class="show-body1" :data-index="index" v-for="(item, index) in allComment" :key="index">
                        <view class="showbox-l">
                            <text>{{ item.name }}</text>
                        </view>

                        <view class="showbox-r" @tap="getAllComment" :data-index="index" :data-sort="item.sort">
                            <picker mode="selector" :value="selectIndex" :range="allStar" @change="bindDateChange" :range-key="'name'">
                                <view class="picker">
                                    <text v-if="item.sort == sortTypeName" class="picker-text">{{ allStar[sortTypeNum].name }}</text>
                                    <text v-else class="picker-text">全部</text>
                                    <image src="/static/images/jian-right.png"></image>
                                </view>
                            </picker>
                        </view>
                    </view>
                    <!-- <view class="show-body1">
          <view class="showbox-l">
            <text>总体评价</text>
          </view>
          <view class="showbox-r">
            <text>全部</text>
            <image src="../../images/jian-right.png"></image>
          </view>
        </view>
        <view class="show-body1">
          <view class="showbox-l">
            <text>总体评价</text>
          </view>
          <view class="showbox-r">
            <text>全部</text>
            <image src="../../images/jian-right.png"></image>
          </view>
        </view> -->
                </view>
                <view class="showbox-bottom">
                    <view class="showbox-btn1" @tap="getIsShow">取消</view>
                    <view class="showbox-btn2" @tap="getSumbit">确定</view>
                </view>
            </view>
        </view>
        <!-- 点击商家回复出现遮罩层，提示输入回复内容 -->
        <view class="replay" v-if="isReplayShow">
            <view class="replay-mask" @tap="getHideReplay"></view>
            <view class="replay-center">
                <view class="showbox-top">
                    <view class="showbox-top1">
                        <image class="showbox-img1" src="/static/images/shai2.png"></image>
                        <text class="showbox-comment">评价筛选</text>
                        <image class="showbox-img1" src="/static/images/shai1.png"></image>
                    </view>
                    <view class="show-line"></view>
                    <view class="showbox-top2" @tap="getHideReplay">
                        <image class="show-img2" src="/static/images/close.png"></image>
                    </view>
                    <textarea class="replay-box" placeholder="请输入评价内容" maxlength="120" :fixed="true" @input="getReplayInfo"></textarea>
                    <view class="xianzhi">
                        <text>{{ replayLength }}/120</text>
                    </view>
                    <view class="showbox-bottom">
                        <view class="showbox-btn1" @tap="getHideReplay">取消</view>
                        <view class="showbox-btn2" @tap="getSumbitReplay">确定</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

const { isNull } = require('../../utils/util.js');

export default {
    data() {
        return {
            indexs: 0,
            active: 0,

            havecoter: [
                {
                    name: '有图片的评价',
                    index: 0
                },
                {
                    name: '无图片的评价',
                    index: 1
                }
            ],

            imgUrl: app.globalData.imgUrl,

            //全局img路径
            evaluatelist: [1, 1, 1, 1, 0.5],

            score: 0,
            page: 1,
            commentList: [],
            comment: '',
            height: 0,
            storeReviewsId: '',
            type: 1,

            dataInfo: {
                allStar: '',
                fiveStar: '',
                fourStar: '',
                threeStar: '',
                twoStar: '',
                oneStar: '',
                lists: []
            },

            isShow: false,

            allComment: [
                {
                    id: 1,
                    name: '总体评价',
                    type: '全部',
                    sort: 'population'
                },
                {
                    id: 2,
                    name: '效果评价',
                    type: '全部',
                    sort: 'effect'
                },
                {
                    id: 3,
                    name: '环境评价',
                    type: '全部',
                    sort: 'environment'
                },
                {
                    id: 4,
                    name: '服务评价',
                    type: '全部',
                    sort: 'attitude'
                },
                {
                    id: 5,
                    name: '理发师评价',
                    type: '全部',
                    sort: 'stylist'
                }
            ],

            allStar: [
                {
                    name: '全部',
                    id: 0,
                    bol: false
                },
                {
                    name: '一星',
                    id: 1,
                    bol: false
                },
                {
                    name: '二星',
                    id: 2,
                    bol: false
                },
                {
                    name: '三星',
                    id: 3,
                    bol: false
                },
                {
                    name: '四星',
                    id: 4,
                    bol: false
                },
                {
                    name: '五星',
                    id: 5,
                    bol: false
                }
            ],

            isSelect: false,
            top: 0,
            commentIndex: '',
            stars: '',
            sorts: '',
            population: 0,
            effect: 0,
            environment: 0,
            attitude: 0,
            stylist: 0,
            idx: 0,
            selectIndex: '',
            isReplayShow: false,

            //是否显示回复信息的遮罩层
            replayInfo: '',

            //回复评论信息
            replayLength: 0,

            //回复评论信息的长度
            selectId: 0,

            replayId: '',

            //点击回复的id
            sortTypeName: '',

            //回复类型
            sortTypeNum: 0,

            //回复星级,
            // 选中和未选中的星星数量
            namelist: [
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                },
                {
                    icon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopstar.png',
                    icon1: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png'
                }
            ],

            stareIcon: '/static/images/starePj.png',
            stareSelectIcon: 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/clip2.png',
            isStarLevel: true,
            lastboxVisible: false,
            orange: '',
            i: '',
            name: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.getSystemInfo({
            success: (res) => {
                this.setData({
                    height: res.windowHeight
                });
            }
        });
        this.getStoreScore();
        this.getInfo(); // this.getStoreCommentList();
    },
    methods: {
        getStoreScoreStatistics() {
            _request
                .get('/storeManage/getStoreScoreStatistics', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {});
        },

        getInfo() {
            this.isStarLevel = true;

            if (this.population == 0 && this.effect == 0 && this.environment == 0 && this.attitude == 0 && this.stylist == 0) {
                this.isStarLevel = true;
            } else {
                this.isStarLevel = false;
            }

            _request
                .postObj('/storeManage/getStoreScoreNum', {
                    type: this.type,
                    starLevel: this.isStarLevel ? Number(this.active) : '',
                    isAttach: this.indexs === 0 ? 1 : 2,
                    storeId: uni.getStorageSync('storeId'),
                    population: this.population,
                    effect: this.effect,
                    environment: this.environment,
                    attitude: this.attitude,
                    stylist: this.stylist
                })
                .then((res) => {
                    console.log(res); // wx.setStorageSync('userId', res.data.data.lists.userId);
                    // wx.setStorageSync('storeId', res.data.data.storeId);

                    this.setData({
                        dataInfo: res.data.data
                    });
                });

            console.log(this.dataInfo);
        },

        // 点击全部评论/未回复评论
        onChange(v) {
            console.log(v);
            this.setData({
                type: v.detail.index === 0 ? 1 : 2
            });
            this.getInfo();
        },

        onClickTab(e) {
            console.log(e);
        },

        mores() {
            uni.navigateTo({
                url: '/pages/evaluationstatistics/index'
            });
        },

        screentext(e) {
            uni.setStorageSync('scoreId', e.currentTarget.dataset.id);
            uni.navigateTo({
                url: '/pagesc/detailsevaluation/index?scoreId=' + e.currentTarget.dataset.storeid
            });
        },

        // 点击筛选
        getChangeComment() {
            this.setData({
                isShow: true
            });
        },

        // 点击遮罩层隐藏弹框
        getIsShow() {
            this.setData({
                isShow: false
            });
        },

        // 点击，获取全部评价
        bindDateChange(e) {
            console.log(e); // 选的星级别

            this.setData({
                sortTypeNum: e.detail.value
            });
        },

        getAllComment(e) {
            // 筛选的类型
            this.setData({
                sorts: e.currentTarget.dataset.sort
            });
            console.log(e.currentTarget.dataset.sort);
            this.setData({
                sortTypeName: e.currentTarget.dataset.sort
            });
        },

        // getAllComment(e){
        //   this.commentIndex=e.currentTarget.dataset.index;
        //   console.log(e.currentTarget.dataset.index);
        //   this.data.selectIndex=e.currentTarget.dataset.index
        //     let storeId = wx.getStorageSync('storeId');
        //     _request.get('/storeManage/getStoreComment',{
        //       storeId:storeId
        //     }).then((res)=>{
        //       console.log(res);
        //     });
        //     this.top=(e.currentTarget.dataset.index-1)*110
        //     console.log(this.top);
        //     this.setData({
        //       isSelect:true,
        //       top:this.top,
        //       commentIndex:this.commentIndex,
        //       sorts:e.currentTarget.dataset.sort
        //     })
        // },
        // 点击选择星星等级
        // getStar(e){
        // let info=e.currentTarget.dataset.info
        // let index1=e.currentTarget.dataset.index
        // console.log(index1);
        // this.data.allComment.map((item,index)=>{
        //   if(this.commentIndex==index){
        //     item.type=info
        //   }else{
        //     item.type='全部'
        //   }
        //   return item
        // });
        //   this.setData({
        //     isSelect:false,
        //     allComment:this.data.allComment,
        //     stars:index1
        //   })
        // },
        // 点击picker获取值[有点问题]
        // bindDateChange(e){
        //   // 怎么获取点击那个类型的id呢
        //   let selectIndex=this.data.selectIndex
        //   console.log(selectIndex);
        //   console.log(e.detail.value);
        //   console.log(e);
        //   // this.data.allStar.map((item,index)=>{
        //   //   console.log(selectIndex,index);
        //   //   if(selectIndex==index){
        //   //     item.type=true
        //   //   }else{
        //   //     item.type=false
        //   //   }
        //     // return item
        //   // });
        //   this.setData({
        //     // allStar:this.data.allStar
        //     selectIndex:e.detail.value
        //   })
        //   switch(e.detail.value){
        //     case "0":
        //     this.setData({
        //       stars:"全部",
        //       idx:e.detail.value
        //     });
        //     break;
        //     case "1":
        //       this.setData({
        //         stars:"一星",
        //         idx:e.detail.value
        //       });
        //       break;
        //     case "2":
        //       this.setData({
        //         stars:"二星",
        //         idx:e.detail.value
        //        });
        //         break;
        //     case "3":
        //         this.setData({
        //           stars:"三星",
        //           idx:e.detail.value
        //          });
        //           break;
        //       case "4":
        //         this.setData({
        //              stars:"四星",
        //              idx:e.detail.value
        //             });
        //             break;
        //             case "5":
        //         this.setData({
        //              stars:"五星",
        //              idx:e.detail.value
        //             });
        //             break;
        //   }
        // console.log(this.data.allStar);
        // },
        // 点击筛选确定按钮
        getSumbit() {
            let sorts = this.sorts;
            this.setData({
                population: 0,
                effect: 0,
                environment: 0,
                attitude: 0,
                stylist: 0
            });

            switch (sorts) {
                case 'population':
                    this.setData({
                        population: this.sortTypeNum
                    });
                    break;

                case 'effect':
                    this.setData({
                        effect: this.sortTypeNum
                    });
                    break;

                case 'environment':
                    this.setData({
                        environment: this.sortTypeNum
                    });
                    break;

                case 'attitude':
                    this.setData({
                        attitude: this.sortTypeNum
                    });
                    break;

                case 'stylist':
                    this.setData({
                        stylist: this.sortTypeNum
                    });
                    break;
            }

            this.getInfo(); // _request.postObj('/storeManage/getStoreScoreNum', {
            //   type: this.data.type,
            //   storeId : 6581,
            //   population:this.data.population,
            //   effect:this.data.effect,
            //   environment:this.data.environment,
            //   attitude:this.data.attitude,
            //   stylist:this.data.stylist
            // }).then(res=>{
            //   console.log(res);

            this.setData({
                isShow: false
            }); // })
        },

        queryListByType(e) {
            let index = e.currentTarget.dataset.index;
            console.log(index);
            this.setData({
                active: index,
                page: 0
            });
            this.getInfo();
        },

        havecoterFun(e) {
            this.setData({
                indexs: e.currentTarget.dataset.index
            });
            this.getInfo();
        },

        // 商家回复按钮  //
        getReplayShow(e) {
            console.log(111);
            console.log(e.currentTarget.dataset.id);
            this.setData({
                isReplayShow: true,
                replayId: e.currentTarget.dataset.id
            });
        },

        // 点击隐藏遮罩层
        getHideReplay() {
            this.setData({
                isReplayShow: false
            });
        },

        // 获取输入框中的内容
        getReplayInfo(e) {
            let len = e.detail.value.length;

            if (len == 120) {
                this.setData({
                    replayLength: 120,
                    replayInfo: e.detail.value
                });
            } else {
                this.setData({
                    replayLength: len,
                    replayInfo: e.detail.value
                });
            }

            console.log(e.detail.value);
        },

        // 点击回复确定按钮
        getSumbitReplay() {
            let scoreId = this.replayId;
            console.log();
            console.log(this.replayInfo);

            _request
                .postObj('/storeManage/updateStoreScoreInfo', {
                    scoreId: scoreId,
                    reply: this.replayInfo
                })
                .then((res) => {
                    console.log(res);

                    if (res.data.code == 200) {
                        this.setData({
                            isReplayShow: false
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });

            this.getInfo();
        },

        // （评价管理）获取门店总评价接口
        getStoreScore: function () {
            let userId = uni.getStorageSync('userId');
            let storeId = uni.getStorageSync('storeId');

            _request
                .get('/storeManage/getStoreScore', {
                    userId: userId,
                    storeId: storeId
                })
                .then((res) => {
                    console.log(res);
                    this.setData({
                        score: res.data.data.score
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // （评价管理）获取用户评价列表
        getStoreCommentList: function () {
            let storeId = uni.getStorageSync('storeId');

            _request
                .get('/storeComment/getStoreCommentList', {
                    storeId: storeId,
                    page: this.page,
                    size: 20
                })
                .then((res) => {
                    console.log(res);
                    var commentList = res.data.data;

                    for (let i = 0; i < commentList.length; i++) {
                        commentList[i]['createtime'] = commentList[i]['createtime'].substring(0, 10);
                        commentList[i]['storerepay'] = '';

                        if (commentList[i]['comment'].length >= 60) {
                            commentList[i]['bool'] = true;
                        } else {
                            commentList[i]['bool'] = false;
                        }

                        commentList[i]['stylistReply'] = decodeURIComponent(commentList[i]['stylistReply']);
                        commentList[i]['reply'] = decodeURIComponent(commentList[i]['reply']);
                        commentList[i]['comment'] = decodeURIComponent(commentList[i]['comment']);
                    }

                    var listTemps = this.commentList;

                    for (let i = 0; i < commentList.length; i++) {
                        listTemps.push(commentList[i]);
                    }

                    this.setData({
                        commentList: listTemps
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        previewImg: function (e) {
            var index = e.currentTarget.dataset.index;
            var item = e.currentTarget.dataset.item;
            uni.previewImage({
                current: item[index],
                //当前图片地址
                urls: item,
                //所有要预览的图片的地址集合 数组形式
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        // 查看全文
        toMore(e) {
            let index = e.currentTarget.dataset.index;
            var commentList = this.commentList;

            if (commentList[index]['showtext']) {
                commentList[index]['showtext'] = false;
            } else {
                commentList[index]['showtext'] = true;
            }

            this.setData({
                commentList: commentList
            });
        },

        handleinput(event) {
            // console.log(event);
            const list = this.commentList;
            let storeReviewsId = event.currentTarget.dataset.id;
            list.forEach((e) => {
                if (e.id === storeReviewsId) {
                    e.storerepay = event.detail.value;
                }
            });
            this.setData({
                commentList: list
            });
        },

        commentblur: function (event) {
            const list = this.commentList;
            let storeReviewsId = event.currentTarget.dataset.id;
            list.forEach((e) => {
                if (e.id === storeReviewsId) {
                    e.storerepay = event.detail.value;
                }
            });
            this.setData({
                commentList: list
            });
        },

        // 回复
        onSendTap: function (e) {
            let storeReviewsId = e.currentTarget.dataset.item;
            const that = this;
            const list = that.commentList;
            let comment = '';
            list.forEach((e) => {
                if (e.id === storeReviewsId) {
                    comment = e.storerepay;
                }
            });

            if (!comment || isNull(comment)) {
                uni.showToast({
                    title: '内容不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } //将emoji表情进行转义再发送至后台

            let regex =
                /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
            let commentNew = comment.replace(regex, function (res) {
                return encodeURIComponent(res);
            });

            _request
                .postObj('/storeComment/replyStoreComment', {
                    storeReviewsId: storeReviewsId,
                    context: commentNew
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const list = that.commentList;
                        list.forEach((e) => {
                            if (e.id === storeReviewsId) {
                                e.reply = comment;
                            }
                        });
                        that.setData({
                            commentList: list,
                            storeReviewsId: storeReviewsId
                        });
                    } else {
                        if (res.data.message.indexOf('敏感词') > -1) {
                            uni.showToast({
                                title: '包含敏感词汇、无效回复',
                                icon: 'error',
                                duration: 2000
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message || '回复失败!',
                                icon: 'error',
                                duration: 2000
                            });
                        }
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        more: function () {
            this.page++;
            this.getStoreCommentList();
        },

        timestampToTime: function (timestamp) {
            var date = new Date(timestamp);
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            return YY + MM + DD;
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.page {
    padding: 20rpx;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.evaluatebox {
    /* padding-top: 20rpx; */
}
/* 发型师 */
.flexbox {
    display: flex;
    flex-wrap: nowrap;
    height: 160rpx;
}

/* 评价 */
.evaluate {
    width: 100%;
    padding: 40rpx 20rpx;
    /* height: 140rpx; */
    background: #ffffff;
    /* box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4); */
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 20rpx;
    box-sizing: border-box;
    /* background-color: rgba(254, 236, 226, 0.4); */
    /* border: 1rpx solid red; */
}

.centerstext {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    padding-left: 20rpx;
}

.centerstextbox {
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 0 20rpx 20rpx 0;
}

.mores {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}

.evaluateimg {
    width: 28rpx;
    height: 28rpx;
}

.l-icon {
    font-family: l-iconfont;
    font-size: 40rpx;
    color: #e94a18 !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.evaluatelistbox {
    flex: 1;
    background-color: rgba(254, 236, 226, 0.4);
    border-radius: 20rpx;
}
.evaluatelistbox > view {
    display: flex;
    align-items: center;
}

.mr-5 {
    margin-right: 5rpx;
}

.column-box {
    /* height: 420rpx; */
    padding-top: 20rpx;
    background: #f1f1f1;
}
.column-line {
    position: absolute;
    left: 40rpx;
    top: 79rpx;
    width: 670rpx;
    z-index: 999;
    height: 1rpx;
    background: #e5e5e5;
    /* background: red; */
}
.evatext {
    font-size: 30rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    margin: 20rpx;
    margin-right: 7rpx;
    line-height: 40rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #e94a18;
}
.shop-style {
    background-color: #fff !important;
}
.headerimg1 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.usercomment {
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    padding: 30rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx;
}

.box {
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 10rpx 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.box2 {
    background: rgb(246, 246, 246);
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border: 1px solid #999;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
}

.box2 input {
    margin: 10rpx;
}
.tips-main {
    display: flex;
    margin-top: 150rpx;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.tipsIcon {
    width: 188rpx;
    height: 200rpx;
}
.tips-main text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    color: #666666;
    line-height: 51rpx;
}
.centers {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    align-content: center;
    /* background: rgb(246,246,246);
  box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04); */
}

.text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
}

.text2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 600;
}

.centers2 {
    width: 100rpx;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    background-color: #ff8722;
    color: #fff;
    border-radius: 10rpx;
}

.placeholder-class {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.usertile {
    height: 120rpx;
    justify-content: space-between;
}

.textfelx {
    width: 300rpx;
}

.usertext1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.usertext2 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.usertext3 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.evatime {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.evatext1 {
    height: 32rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ff8722;
    line-height: 40rpx;
    margin: 10rpx;
}

.evaluate1 {
    height: 120rpx;
    text-align: right;
}

.usereva {
    margin-top: 30rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
}

.userevatext1 {
    height: 100%;
}

.userevatext {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more {
    height: 34rpx;
    font-size: 12px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.img-200 {
    height: 200rpx;
    width: 200rpx;
    border-radius: 10rpx;
}

.imglistflexbox {
    display: flex;
    flex-wrap: wrap;
}

.activetext {
    color: #ff8722;
}

.evaluation-store-reray-input {
    width: 570rpx;
}

.header {
    display: flex;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.goback {
    width: 22rpx;
    height: 38rpx;
    margin-left: 20rpx;
    margin-right: 11rpx;
}

.headline {
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
}

.shop {
    position: relative;
    height: 100%;
    width: 100%;

    /* background: #fbfbfb; */
    background: #fff;
    /* position: relative;
  top: -40rpx; */
}
.shop van-tabs {
    background: #fff !important;
}
.top-34 {
    top: 34rpx;
}

.top-90 {
    position: relative;
    top: -90rpx;
}

.van-tabs__nav,
.van-tabs__scroll--line {
    background-color: #f1f1f1 !important;
}

.van-tabs__scroll {
    display: flex;
}

.van-tab--active {
    font-size: 40rpx !important;
    color: #333333 !important;
}

.ambitustext-lr {
    position: absolute;
    top: 30rpx;
    right: 40rpx;
    z-index: 50;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}

.starbox {
    padding: 0rpx 40rpx;
    border-bottom: 20rpx solid #f1f1f1;
}
.pay_icon_6 {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}

.starbox-rl {
    display: flex;
    margin-top: 30rpx;
    padding-bottom: 30rpx;
}
.pay_icon_6text1 {
    width: 30rpx;
    height: 30rpx;
    background: #ffffff;
    border: 1rpx solid #d2d2d2;
    border-radius: 50%;
    margin-right: 10rpx;
}
.pay_icon_6text2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.have-contentbox {
    display: flex;
    align-items: center;
    margin-right: 80rpx;
}
.pay_icon_6text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.have-contentboxcl {
    width: 36rpx;
    height: 36rpx;
    background: #e94a18;
    border-radius: 50%;
}
.van-tabs {
    background: #fff !important;
}
.van-tabs__scroll {
    background: #fff !important;
}
.van-tab {
    font-size: 26rpx !important;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333 !important;
    background: #fff;
}

.nav-class {
    width: 500rpx;
    margin-left: 20rpx;
    /* margin: 0 auto; */
    background: #fff;
}

.van-tab--active {
    font-weight: 500;
    font-weight: var(--font-weight-bold, 500);
    color: #e94a18 !important;
}

.van-tabs__line {
    background: #e94a18 !important;
    /* width: 189rpx!important; */
    height: 8px;
    /* left: -0rpx!important; */
    /* top: 87rpx; */
    height: var(--tabs-bottom-bar-height, 8rpx);
    border-radius: 4rpx;
    border-radius: var(--tabs-bottom-bar-height, 4rpx);
    background-color: #ee0a24;
    background-color: var(--tabs-bottom-bar-color, #ee0a24);
}

.van-tab {
    height: 100%;
}

.shopbox {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    padding: 40rpx 20rpx 30rpx 20rpx;
    box-sizing: border-box;
}

.shopbox1 {
    width: 710rpx;
    height: 240rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;
}

.shopleft {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.shopleft > view:nth-child(1) {
    margin: 0rpx 20rpx 20rpx 0rpx;
}

.shopleft > view:nth-child(2) {
    margin: 0rpx 0 20rpx 0;
}

.shopleft view:nth-child(1) view:nth-child(2) {
    margin: 0rpx 30rpx 20rpx 20rpx;
}

.van-tabs__scroll--line {
    box-sizing: initial;
    height: 89rpx !important;
}

.van-tab--active {
    font-size: 32rpx !important;
    font-weight: 500;
    font-weight: var(--font-weight-bold, 500);
    color: #323233;
    color: var(--tab-active-text-color, #323233);
}

.shopinfobox {
    width: 750rpx;
    height: 100%;
    border-bottom: 20rpx solid #f1f1f1;
}

.shopinfo {
    width: 672rpx;
    height: 100%;
    margin: 0 auto;
}

.shoptitle {
    width: 100%;
    height: 81rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e9e7e7;
}

.shoptitleleft {
    display: flex;
    overflow: visible !important;
}

.shopname {
    display: block;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.shopstate {
    display: block;
    width: 84rpx;
    height: 30rpx;
    background-color: rgba(153, 153, 153, 0.1);
    border-radius: 6rpx;
    margin: 12rpx 0 0 13rpx;
    line-height: 30rpx;
    text-align: center;
    color: #666666;
}

.shopicon {
    width: 51rpx;
    height: 51rpx;
    margin-left: 40rpx;
}

.shopcompany {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1rpx solid #e9e7e7;
}

.informationbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.informationtext {
    width: 548rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-content: center;
}

.champion {
    margin-top: 20rpx !important;
}

.shopshare {
    width: 51rpx;
    height: 51rpx;
}

.bottonshopicon {
    display: inline;
    margin-left: 40rpx;
}

.locationicon {
    margin-top: 20rpx;
    width: 50rpx;
    height: 56rpx;
}

.locationimage {
    width: 69rpx;
    height: 77rpx;
}

.shopcompanytitle {
    width: 100%;
    height: 71rpx;
    display: flex;
    align-items: center;
}

.locationtext {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
    line-height: 71rpx;
}

.locationstro {
    width: 26rpx;
    height: 26rpx;
}

.detailsletf {
    display: flex;
}

.details {
    width: 100%;
    height: 140rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #e9e7e7;
}

.detailsicon {
    margin-top: 29rpx;
    width: 80rpx;
    height: 80rpx;
}

.detailsimage {
    width: 105rpx;
    height: 103rpx;
}

.detailstext {
    padding: 42rpx 7rpx 8rpx 21rpx;
}

.detailstime {
    padding-left: 21rpx;
    height: 30rpx;
    font-size: 24epx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 30rpx;
}

.amount {
    height: 23rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    /* color: #E94A18; */
    line-height: 21rpx;
}

.figurebox {
    display: flex;
    flex-direction: column;
}

.figure {
    height: 30rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    /* color: #E94A18; */
    line-height: 30rpx;
    margin-top: 47rpx;
}

.starimage {
    display: flex;
    margin-top: 6rpx;
}

.star {
    width: 24rpx;
    height: 24rpx;
    padding-right: 1rpx;
}

.project {
    width: 100%;
    border-bottom: 1rpx solid #e9e7e7;
}

.projecttitle {
    display: flex;
    width: 100%;
    height: 40rpx;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
}

.projectleft {
    display: flex;
    width: 550rpx;
    height: 40rpx;
    overflow-x: auto;
}

.projectlefttext {
    min-width: max-content;
    text-align: center;

    padding: 9rpx 19rpx 9rpx 16rpx;
    height: 24rpx;
    line-height: 24rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-right: 10rpx;
    background-color: rgba(153, 153, 153, 0.1);
}

.projectright {
    display: flex;
    align-items: center;
    height: 40rpx;
    line-height: 40rpx;
}

.projectrighttext {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
}

.phone {
    height: 83rpx;
    line-height: 83rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.certification {
    margin-top: 30rpx;
    width: 317rpx;
    height: 40prx;
    background-color: rgba(233, 74, 24, 0.1);
    display: flex;
    border-radius: 10rpx;
    align-items: center;
}

.certificationicon {
    width: 40rpx;
    height: 40rpx;
}

.certificationtext {
    line-height: 40rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-left: 10rpx;
}

.certificationdetails {
    width: 16rpx;
    height: 20rpx;
    margin-left: 17rpx;
}

.site_Info_right {
    width: 675rpx;
    margin-bottom: 37rpx;
    text-align: justify;
    display: -webkit-box;
}

.realVal {
    position: relative;
}

.hide {
    max-height: 640rpx;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 37rpx;
}

.show {
    border-left: 15rpx solid rgba(255, 255, 255, 0.6);
    text-align: center;
    display: block;
    /* width: 70rpx; */
    position: absolute;
    bottom: 57rpx;
    right: 30rpx;
    word-break: break-all;
}

.onClickShowtext {
    text-align: right;
    width: 65rpx;
    display: block;
    background-color: #fff;
}

/* 周边服务 */
.around {
    width: 100%;
    height: 504rpx;
}

.aroundtitle {
    margin: 0 39rpx;
    height: 101rpx;
    display: flex;
    justify-content: space-between;
    line-height: 101rpx;
    font-size: 30rpx;
    font-family: Taipei Sans TC Beta;
    font-weight: bold;
    color: #222222;
}

.aroundtitleleft {
    display: flex;
    align-items: center;
}

.aroundtitleright {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 101rpx;
}

.ambitusicon {
    width: 36rpx;
    height: 42rpx;
}

.ambitustext {
    margin-left: 9rpx;
}

/* 轮播 */
/*轮播图*/
.swiperbox {
    margin-left: 40rpx;

    height: 362rpx;
}

.swiper_item {
    margin: 1rpx;
    height: 362rpx !important;
    width: 270rpx;
    border-radius: 10rpx;
    box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(170, 109, 3, 0.16) !important;
    overflow: hidden;
}

.image_group {
    position: relative;
    margin-top: 20rpx;
    height: 370rpx;
}

.swiper_item image {
    width: 270rpx;
    height: 182rpx;
}

.money {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-decoration: line-through;
    color: #999999;
    padding-left: 15rpx;
}

.discount {
    margin-top: 10rpx;
    margin-left: 15rpx;
    width: 151rpx;
    height: 36rpx;
    background-image: url('https://s1.ax1x.com/2022/09/21/xiaXfH.png');
    background-size: 100% 100%;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0rpx 2rpx 4rpx rgba(233, 76, 25, 0.4);
}

.synopsis {
    margin-top: 10rpx;
    width: 242rpx;
    margin-left: 15rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servicemunber {
    margin: 10rpx 0 18rpx 15rpx;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

/* 展开 */

.text {
    color: #333;
    font-size: 26rpx;
}

.btn {
    color: dodgerblue;
    cursor: pointer;
}

.text::before {
    content: '';
    float: right;
}

.content {
    display: flex;
    padding-bottom: 37rpx;
}

.text::before {
    content: '';
    float: right;
    height: 100%;
    margin-bottom: -16px;
}

.btn {
    float: right;
    clear: both;
    margin-right: 8px;
    margin-left: 50rpx;
}

.text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
}

.dkl {
    /* display: flex; */
}

.textunfold {
    content: '';
    float: right;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

/* 列表 */
.column {
    background: #fff;
    border-bottom: 20rpx solid #f1f1f1;
    height: 100rpx;
    display: flex;
    align-items: center;
}
.margin-bottom-xs {
    width: 200rpx;
    height: 54rpx;
    background: #e94c19;
    border-radius: 27rpx;
    line-height: 54rpx;
    text-align: center;
    box-sizing: border-box;
}
.text-bold {
    /* padding: 12rpx 50rpx; */
    background: #e94c19;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
}

.text-df {
    /* padding: 12rpx 40rpx; */
    background-color: rgba(153, 153, 153, 0.1);
    border-radius: 23rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.margin-tb-sm {
    /* font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333; */

    padding-left: 9rpx !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    margin-bottom: 15rpx;
}

.text-through {
    padding-left: 9rpx;
    margin-top: 10rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-decoration: line-through;
    color: #999999;
}

.sum-peasbox {
    width: 250rpx;
    height: 44rpx;
    color: #fff !important;
    border-radius: 0px 20rpx 20rpx 10rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-bottom: 28rpx;
    line-height: 44rpx;
    padding-left: 14rpx;
    margin-top: 10rpx;
}

.sold-out {
    padding-left: 6rpx;
    width: 160rpx;
    height: 34rpx;
    background: linear-gradient(-90deg, #666666 0%, rgba(102, 102, 102, 0.03) 97%, rgba(255, 255, 255, 0) 100%);
}

.money-meaning {
    padding-left: 0rpx !important;
}

.guest-price {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    padding-left: 7rpx;
}

.all-deducted {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-left: 20rpx;
}

.padding-lr-xs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 0 !important;
    /* padding-left: 0; */
}
.padding-lr-xs1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* padding-left: 10rpx;
  padding-right: 0rpx!important; */
}
/* .padding-lr-sm {
  padding-left: 30rpx;
  padding-right: 30rpx;
} */

.padding-lr-xs {
    padding-left: 0rpx;
    /* padding-right: 10rpx; */
}

.margin-top-sm {
    margin-top: 0rpx;
}

.padding-lr {
    /* padding-left: 0rpx;
  padding-right: 10rpx; */
    margin-top: 40rpx;
}
/* .padding-lr:nth-child(3n){
  padding-right:0;
}
.padding-lr:nth-child(3n-2){
  padding-left:0;
} */
.swiper_box {
    width: 750rpx;
    height: 300rpx;
    box-shadow: 2px 4px 8px 0px #f5f5f5;
}

.swiper_img {
    width: 750rpx;
    height: 300rpx;
}

.search {
    width: 650rpx;
    height: 70rpx;
    background: #eeeeee;
}

.search_img1 {
    width: 28rpx;
    height: 28rpx;
}

.search_img2 {
    width: 60rpx;
    height: 60rpx;
}

.classify_box {
    width: 25%;
}

.classify_img {
    width: 80rpx;
    height: 80rpx;
}

.banner_img2 {
    width: 710rpx;
    height: 166rpx;
}

.bar_box {
    width: 60rpx;
    height: 6rpx;
    margin: 0 auto;
}

/* 列表样式 */
.goods_info {
    width: 330rpx;
    position: relative;
    z-index: 1;
    background: #ffffff;
    box-shadow: 0px 6rpx 10rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 10rpx;
    margin-bottom: 30rpx;
}

.coluboxleft {
    overflow: initial !important;
}

.coluboxright {
    overflow: initial !important;
    position: relative;
}

.goods_img {
    width: 330rpx;
    height: 248rpx !important;
}

.goods_sold {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 20rpx;
    background: linear-gradient(-90deg, #666666 0%, rgba(102, 102, 102, 0.03) 97%, rgba(255, 255, 255, 0) 100%);
}

.totop {
    top: 1000rpx;
    right: 43rpx;
    position: fixed;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    width: 66rpx;
    height: 66rpx;
}

.page-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

.flsxs-serve {
    display: flex;
    justify-content: space-between;
}

.serve-name {
    text-align: center;
    height: 62rpx;
    line-height: 62rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

.serve-price {
    margin-left: 16rpx;
}

.vip-price {
    margin-left: 17rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #e94a18;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    padding: 0 10rpx;
}

/* 盲盒 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.wrapperbox {
    width: 750rpx;
    display: flex;
    justify-content: center;
    height: 911rpx;
    top: -100rpx;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.headimg {
    width: 720rpx;
    height: 640rpx;
}

.btn_ft {
    position: fixed;
    -webkit-overflow-scrolling: touch;

    z-index: 1;
    /* z-index: 99; */
    width: 112rpx;
    height: 136rpx;
    bottom: 120rpx;
    right: 20rpx;
}

.btn_close {
    position: absolute;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    width: 82rpx;
    height: 82rpx;
    bottom: 16rpx;
    left: calc(50% - 41rpx);
}

.column .flexs .padding-lr {
    min-width: max-content;
    text-align: center;
    display: flex;
    align-items: center;
    height: 100rpx;
}

.columnbuttom {
    border-bottom: 20rpx solid #f1f1f1;
}

.remarktop {
    /* width: 100%; */
    height: 20rpx;
    background-color: #f1f1f1;
}

.pagebottom {
    height: 100rpx;
}

.remarktitle {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
}

.remarktitlleft {
    display: flex;
    height: 39rpx;
}

.remarkicon {
    width: 50rpx;
    height: 39rpx;
}

.remarkp {
    margin-left: 4rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
}

.sort {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #666666;
    margin-left: 29rpx;
}

.sort-active {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #666666;
    margin-left: 29rpx;
    color: #e94a18;
}

.remarkmore {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    align-items: center;
}

.scorebox {
    height: 124rpx;
    background-color: rgba(254, 236, 226, 0.5);
    border-radius: 10rpx;
}

.scorefigure {
    padding: 20rpx 0 0 42rpx;
    font-size: 36rpx;
    font-family: FZChaoCuHei-M10S;
    font-weight: 400;
    color: #e94a18;
}

.scorefigurebottom {
    padding: 0 18rpx 0rpx 31rpx;
}

.synthesis {
    margin-right: 82rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.feedback {
    margin-right: 80rpx;
}

.scoreinfo {
    height: 153rpx;
    display: flex;
    margin-top: 29rpx;
    justify-content: space-between;
    padding-right: 29rpx;
    margin-left: 12rpx;
    align-items: center;
}

.scoreinfoicon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.scoreinfoiconbox {
    display: flex;
}

.scoreinforight {
    margin-left: 28rpx;
}

.scorename {
    display: flex;
    align-items: center;
}

.scorenametext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.columnbuttom {
    border-bottom: 20rpx solid #f1f1f1;
}

.remarktop {
    height: 20rpx;
    background-color: #f1f1f1;
}

.remarkbox {
    padding: 0 20rpx 0 20rpx;
}

.pagebottom {
    height: 100rpx;
}

.remarktitlleft {
    display: flex;
    height: 39rpx;
}

.remarkicon {
    width: 50rpx;
    height: 39rpx;
}

.remarkp {
    margin-left: 4rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #222222;
}

.scorebox {
    height: 124rpx;
    background-color: rgba(254, 236, 226, 0.5);
    border-radius: 10rpx;
}

.scorefigure {
    padding: 20rpx 0 0 42rpx;
    font-size: 36rpx;
    font-family: FZChaoCuHei-M10S;
    font-weight: 400;
    color: #e94a18;
}

.scorefigurebottom {
    padding: 0 18rpx 0rpx 31rpx;
}

.synthesis {
    margin-right: 82rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.feedback {
    margin-right: 80rpx;
}

.scoreinfoicon {
    width: 80rpx;
    height: 80rpx;
}

.infosolt-box {
    border-bottom: 20rpx solid #f1f1f1;
}

.scoreinfoiconbox {
    display: flex;
}

.scoreinfobox {
    padding: 0rpx 20rpx;
    border-bottom: 20rpx solid #f1f1f1;
}

.scorename {
    margin-right: 20rpx;
    display: flex;
    align-items: center;
}

.scorenametext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.scorephone {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.scorevip {
    text-align: center;
    width: 100rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    background-color: rgba(233, 74, 24, 0.1);
}

.scoremember {
    margin-left: 10rpx;
    text-align: center;
    width: 110rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    background-color: rgba(233, 74, 24, 0.1);
}

.screenbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.screen {
    width: 44rpx;
    height: 43rpx;
}

.screentext {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-left: 8rpx;
}
.times {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.scorename-box {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}
.scorename-stars {
    display: flex;
    align-items: center;
    /* margin-bottom: -10rpx; */
    /* border: 1rpx solid red; */
    /* width: 100rpx; */
    /* vertical-align: bottom; */
}
.scorename-stars image {
    width: 24rpx;
    height: 23rpx;
    /* border: 1rpx solid red; */
    margin: 0 1rpx;
}

.ghostGray-text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.reply {
    text-align: center;
    width: 120rpx;
    height: 60rpx;
    background: #e94c19;
    border-radius: 30rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 60rpx;
}
.evaluation {
    width: 560rpx;
    margin-left: 119rpx;
    border-top: 1rpx solid #e5e5e5;
    border-bottom: 1rpx solid #e5e5e5;
}

.evaluationtext {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.evaluationimagebox {
    display: flex;
    margin-top: 30rpx;
    justify-content: space-between;
    flex-wrap: wrap;
    width: auto;
    margin-bottom: 30rpx;
}

.evaluationimage {
    width: 160rpx;
    height: 160rpx;
    /* background: linear-gradient(0deg, #F1AA14 0%, #FB7099 100%); */
    border-radius: 10rpx;
    margin-bottom: 30rpx;
}

.evaluationbottom {
    width: 560rpx;
    margin-left: 120rpx;
    display: flex;
    padding: 30rpx 0;
    justify-content: space-between;
    align-items: center;
}

.evaluationname {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.evaluationtime {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 80rpx;
}

.botton-box {
    height: 100rpx;
}
/* 弹窗 */
.showbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    /* width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5); */
}
.showbox-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.showbox-center {
    position: absolute;
    top: 1043rpx;
    left: 40rpx;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 670rpx;
    height: 880rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.showbox-top {
    /* border: 1rpx solid red; */
}
.showbox-top1 {
    position: absolute;
    top: 40rpx;
    left: 231rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1rpx solid red; */
}
.showbox-img1 {
    width: 21rpx;
    height: 16rpx;
}
.showbox-comment {
    margin: 0 12rpx;
}
.show-line {
    position: absolute;
    top: 113rpx;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e5e5e5;
}
.showbox-top2 {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}
.show-img2 {
    width: 30rpx;
    height: 30rpx;
}
.showbox-body {
    position: absolute;
    top: 113rpx;
    padding: 0 100rpx;
    width: 100%;
    box-sizing: border-box;
}
.show-body1 {
    /* border: 1rpx solid red; */
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e5e5e5;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}
.showbox-l {
}
.showbox-l text {
    margin-left: 29rpx;
}
.showbox-r {
    color: #e94a18;
}
.showbox-r text {
}
.showbox-r image {
    width: 20rpx;
    height: 23rpx;
    margin-left: 34rpx;
}
.showbox-star {
    position: absolute;
    z-index: 100;
    right: 100rpx;
    top: 200rpx;
    border: 1rpx solid #ccc;
    color: #ccc;
    background: #fff;
    border-radius: 10rpx;
}
.showbox-select {
    padding: 10rpx 50rpx;
}

.showbox-bottom {
    position: absolute;
    bottom: 30rpx;
    /* border: 1rpx solid red; */
}
.showbox-btn1 {
    position: absolute;
    left: 39rpx;
    bottom: 30rpx;
    width: 201rpx;
    height: 67rpx;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0px 10rpx 16rpx 0px rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    text-align: center;
    line-height: 67rpx;
    color: #666666;
}
.showbox-btn2 {
    position: absolute;
    left: 429rpx;
    bottom: 30rpx;
    width: 201rpx;
    height: 67rpx;
    /* border: 1rpx solid red; */
    background: #e94c19;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0px 10rpx 16rpx 0px rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    text-align: center;
    line-height: 67rpx;
    color: #ffffff;
}

/* 回复弹出框 */
.replay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}
.replay-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}
.replay-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 670rpx;
    height: 880rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.replay-box {
    flex: 1;
    height: 391rpx;
    margin: 174rpx auto 0;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 20rpx;
    box-sizing: border-box;
}

.xianzhi text {
    position: absolute;
    left: 500rpx;
    top: 525rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #999999;
    line-height: 50rpx;
}
.van-tabs__wrap {
    border-bottom: 1px solid #e5e5e5;
}
.stareSerch {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.stareSerch-tips {
    margin-top: 50rpx;
}
</style>
